<template>
	<view class="bigBox">
		<u-tabs :list="list" bg-color="#ffffff"  :activeStyle="{
            color: '#3c9cff'
        }" :scrollable="false"  :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="qCard">
			<view class="qUp">
				<view style="width: 10%;">
					<view class="qLeft">
						1
					</view>
				</view>
				<view class="qRight">
					关于张三提交的金融“活水”服务实体经济 信贷投放促进相关产业增长会议费用保修
				</view>
			</view>
			<view class="qDown">
				<view class="qDownLeft">
						<view class="">
							所属部门：第三支队
						</view>
						<view style='margin-top: 10rpx;'>
							申请预算：2360元
						</view>
				</view>
				<view style="qDownRight">
					<image src="../../static/daish.jpg" mode="" style="width: 130rpx;height:120rpx;margin-right:66rpx"></image>
				</view>
			</view>
		</view>
		<view class="qCard">
			<view class="qUp">
				<view style="width: 10%;">
					<view class="qLeft">
						2
					</view>
				</view>
				<view class="qRight">
					关于张三提交的零星加油费
				</view>
			</view>
			<view class="qDown">
				<view class="qDownLeft">
						<view class="">
							所属部门：第三支队
						</view>
						<view style='margin-top: 10rpx;'>
							申请预算：1167元
						</view>
				</view>
				<view style="qDownRight">
					<image src="../../static/daish.jpg" mode="" style="width: 130rpx;height:130rpx;margin-right:60rpx"></image>
				</view>
			</view>
		</view>
		<view class="qCard">
			<view class="qUp">
				<view style="width: 10%;">
					<view class="qLeft">
						3
					</view>
				</view>
				<view class="qRight">
					上海,江苏等地优化入境人员防控政策
				</view>
			</view>
			<view class="qDown">
				<view class="qDownLeft">
						<view class="">
							所属部门：第三支队
						</view>
						<view style='margin-top: 10rpx;'>
							申请预算：2360元
						</view>
				</view>
				<view style="qDownRight">
					<image src="../../static/daish.jpg" mode="" style="width: 130rpx;height:130rpx;margin-right:60rpx"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
									name: '待办',	
								}, {
									name: '已办',	
								}
									],
												current: 0
					
			}
		},
		methods: {
			change(index) {
							this.current = index.index;
							console.log(index)
						}
		}
	}
</script>

<style scoped>
	
		.bigBox {
			height: 100vh;
			background-color: #f5f5f5;
		}
		/deep/ .uni-scroll-view, .uni-scroll-view-content {
			background-color: #ffffff;
		}
	.qCard {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
	}
	.qUp {
		display: flex;
		width: 100%;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom:20rpx ;
	}
	.qDown {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding-top:10rpx ;
		
	}
	 .qLeft {
		width: 35rpx;
		margin-top: 3rpx;
		height: 35rpx;
		border:4rpx solid #040404;	
		border-radius: 50%;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	.qRight {
		width: 90%;
		font-size: 30rpx;
		font-weight: 500;
	}
	.qDownLeft {
		padding-top: 10rpx;
		padding-left: 70rpx;
		color: #5c5c5c;
		font-size: 30rpx;
		font-weight: 500;
	}
	.qDownRight {
		padding-right: 80rpx;
		padding-bottom: -10rpx;
	}
</style>
